<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>进度查询</title>
		<link rel="stylesheet" type="text/css" href="../css/home.css" />
		<link rel="stylesheet" type="text/css" href="../css/fontawesome/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css.page/service/serviceList.css"/>
	</head>

	<body ontouchstart>
		<div class="service-list-search">
			<div><input type="text" name="" class="search" value="" placeholder="请输入要查询到内容" /></div>
			<div class="fa fa-search searchBtn"></div>
		</div>
		<div class="service-list-content">
			<!--遍历列表对三种不同的业务类型进行区分-->
			<div class="service-list-item" v-for="item in serviceList">
				<div class="row1">
					<div class="type">
						<div v-bind:class="{ 'fa fa-pencil map': item.TYPE=='测绘','fa fa-file-text file': item.TYPE=='工程档案','fa fa-random line': item.TYPE=='地下管线'}"></div>
						<div v-html="item.TYPE"></div>
					</div>
					<!--工作状态的3类8种情况-->
					<div class="state" v-if="item.TYPE=='测绘'" v-bind:class="{ 'start': item.WORKSTATE=='签订合同','end': item.WORKSTATE=='交付成果'}">
						<div>办理状态：</div>
						<div v-html="item.WORKSTATE"></div>
					</div>
					<!--测绘的2种情况-->
					<div class="state start" v-if="item.TYPE=='工程档案'" v-bind:class="{ 'start': item.WORKSTATE=='办理预登记','process': item.WORKSTATE=='领取预验收证明','end': item.WORKSTATE=='领取确认函'}" >
						<div>办理状态：</div>
						<div v-html="item.WORKSTATE"></div>
					</div>
					<!--工程档案的3种情况-->
					<div class="state start" v-if="item.TYPE=='地下管线'" v-bind:class="{ 'start': item.WORKSTATE=='查询','process': item.WORKSTATE=='备案','end': item.WORKSTATE=='领取成果'}">
						<div>办理状态：</div>
						<div v-html="item.WORKSTATE"></div>
					</div>
					<!--地下管线的3种情况-->
				</div>
				<div class="row2">
					<div class="title" v-html="item.TITLE"></div>
				</div>
				<div class="row3">
					<div style="margin-left: 15px;">建设单位：</div>
					<div v-html="item.COMPANY"></div>
				</div>
				<!--测绘有业务类型，工程档案和地下管线有送报责任书号-->
				<div class="row4" v-if="item.TYPE=='测绘'">
					<div class="time">
						<div>变更时间：</div>
						<div v-html="item.DATE"></div>
					</div>
					<div class="info">
						<div>业务类型：</div>
						<div v-html="item.KIND"></div>
					</div>
				</div>
				<div class="row4" v-if="item.TYPE=='工程档案'">
					<div class="time">
						<div>申请时间：</div>
						<div v-html="item.DATE"></div>
					</div>
					<div class="info">
						<div>报送责任书号：</div>
						<div v-html="item.NUM"></div>
					</div>
				</div>
				<div class="row4" v-if="item.TYPE=='地下管线'">
					<div class="time">
						<div>申请时间：</div>
						<div v-html="item.DATE"></div>
					</div>
					<div class="info">
						<div>工程编号：</div>
						<div v-html="item.NUM"></div>
					</div>
				</div>
				<!--时间线-->
				<div class="timeLine">
					<div>办理流程:</div>
					<div>
						<div class="timeItem" v-for="timeItem in item.PROCESS" v-if="item.TYPE=='测绘'">
							<div>
								<div v-bind:class="{ 'fa fa-edit start icon': timeItem.NAME=='签订合同','fa fa-check end icon': timeItem.NAME=='交付成果'}"></div>
								<div style="margin-left: 10px;" v-html="timeItem.NAME"></div>
								<div class="date" v-html="timeItem.DATE">2017/06/01</div>
							</div>
						</div>
						<div class="timeItem" v-if="item.TYPE=='测绘'&&item.PROCESS.length==1">
							<div>
								<div class="icon grey"></div>
								<div style="margin-left: 10px;color: #CBCBCB;">交付成果</div>
								<div class="date"></div>
							</div>
						</div>
						<!--测绘业务时间线-->
						<div class="timeItem" v-for="timeItem in item.PROCESS" v-if="item.TYPE=='工程档案'">
							<div>
								<div v-bind:class="{ 'fa fa-edit start icon': timeItem.NAME=='办理预登记','fa fa-exclamation process icon': timeItem.NAME=='领取预验收证明','fa fa-check end icon': timeItem.NAME=='领取确认函'}"></div>
								<div style="margin-left: 10px;" v-html="timeItem.NAME"></div>
								<div class="date" v-html="timeItem.DATE">2017/06/01</div>
							</div>
						</div>
						<div class="timeItem" v-if="item.TYPE=='工程档案'&&item.PROCESS.length<2">
							<div>
								<div class="icon grey"></div>
								<div style="margin-left: 10px;color: #CBCBCB;">领取预验收证明</div>
								<div class="date"></div>
							</div>
						</div>
						<div class="timeItem" v-if="item.TYPE=='工程档案'&&item.PROCESS.length<3">
							<div>
								<div class="icon grey"></div>
								<div style="margin-left: 10px;color: #CBCBCB;">领取确认函</div>
								<div class="date"></div>
							</div>
						</div>
						<!--工程档案时间线-->
						<div class="timeItem" v-for="timeItem in item.PROCESS" v-if="item.TYPE=='地下管线'">
							<div>
								<div v-bind:class="{ 'fa fa-edit start icon': timeItem.NAME=='查询','fa fa-exclamation process icon': timeItem.NAME=='备案','fa fa-check end icon': timeItem.NAME=='领取成果'}"></div>
								<div style="margin-left: 10px;" v-html="timeItem.NAME"></div>
								<div class="date" v-html="timeItem.DATE">2017/06/01</div>
							</div>
						</div>
						<div class="timeItem" v-if="item.TYPE=='地下管线'&&item.PROCESS.length<2">
							<div>
								<div class="icon grey"></div>
								<div style="margin-left: 10px;color: #CBCBCB;">备案</div>
								<div class="date"></div>
							</div>
						</div>
						<div class="timeItem" v-if="item.TYPE=='地下管线'&&item.PROCESS.length<3">
							<div>
								<div class="icon grey"></div>
								<div style="margin-left: 10px;color: #CBCBCB;">领取成果</div>
								<div class="date"></div>
							</div>
						</div>
						<!--地下管线时间线-->
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/fastclick.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js.page/service/serviceList.js" type="text/javascript" charset="utf-8"></script>
</html>